<template>
	<view class="custom-filter-container">
		<!-- 筛选组件 -->
		<view class="custom-filter">
			<!-- 状态筛选 -->
			<view 
				class="filter-item" 
				@click="toggleStatus" 
				:class="{'active': showStatusDropdown}"
			>
				<view class="filter-label">
					<text>{{getStatusText()}}</text>
					<view class="arrow-icon" :class="{'rotate': showStatusDropdown}"></view>
				</view>
				
				<!-- 状态下拉菜单 -->
				<view class="dropdown-panel" v-if="showStatusDropdown">
					<view 
						class="dropdown-item" 
						v-for="(item, index) in option" 
						:key="index"
						@click.stop="selectStatus(item)"
						:class="{'active': value1 === item.value}"
					>
						<text>{{item.text}}</text>
						<view v-if="value1 === item.value" class="check-icon"></view>
					</view>
				</view>
			</view>
			
			<!-- 时间排序筛选 -->
			<view 
				class="filter-item" 
				@click="toggleOrder"
				:class="{'active': showOrderDropdown}"
			>
				<view class="filter-label">
					<text>{{getOrderText()}}</text>
					<view class="arrow-icon" :class="{'rotate': showOrderDropdown}"></view>
				</view>
				
				<!-- 排序下拉菜单 -->
				<view class="dropdown-panel" v-if="showOrderDropdown">
					<view 
						class="dropdown-item" 
						v-for="(item, index) in option2" 
						:key="index"
						@click.stop="selectOrder(item)"
						:class="{'active': value2 === item.value}"
					>
						<text>{{item.text}}</text>
						<view v-if="value2 === item.value" class="check-icon"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CustomFilter',
	props: {
		option: {
			type: Array,
			required: true
		},
		option2: {
			type: Array,
			required: true
		},
		value1: {
			type: [String, Number],
			default: ''
		},
		value2: {
			type: String,
			default: ''
		},
		showStatusDropdown: {
			type: Boolean,
			default: false
		},
		showOrderDropdown: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		// 获取当前状态文本
		getStatusText() {
			for(let item of this.option) {
				if(item.value === this.value1) {
					return `状态：${item.text}`;
				}
			}
			return '状态：全部';
		},
		// 获取当前排序文本
		getOrderText() {
			for(let item of this.option2) {
				if(item.value === this.value2) {
					return `排序：${item.text}`;
				}
			}
			return '排序：日期降序';
		},
		// 切换状态下拉菜单
		toggleStatus() {
			this.$emit('toggle-status');
		},
		// 切换排序下拉菜单
		toggleOrder() {
			this.$emit('toggle-order');
		},
		// 选择状态
		selectStatus(item) {
			this.$emit('select-status', item);
		},
		// 选择排序
		selectOrder(item) {
			this.$emit('select-order', item);
		}
	}
}
</script>

<style lang="scss" scoped>
.custom-filter-container {
	background-color: #ffffff;
	padding-top: 0;
	position: relative;
	z-index: 200;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.custom-filter {
	display: flex;
	background: linear-gradient(to right, #ffffff, #f9fbff);
	margin: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	position: relative;
	overflow: visible;
}

// 添加背景装饰
.custom-filter::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 160rpx;
	height: 160rpx;
	background: radial-gradient(circle at top right, rgba(41, 121, 255, 0.08), transparent 70%);
	z-index: -1;
}

.filter-item {
	flex: 1;
	position: relative;
	padding: 30rpx 0;
	transition: all 0.3s;
	z-index: 201;
}

.filter-item:first-child {
	border-right: 1px solid rgba(0,0,0,0.03);
}

.filter-item:active {
	background-color: rgba(0,0,0,0.02);
}

.filter-label {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40rpx;
}

.filter-label text {
	font-size: 28rpx;
	color: #3a4354;
	margin-right: 10rpx;
	font-weight: 500;
	transition: color 0.3s;
}

// 激活状态的标签样式
.filter-item.active .filter-label text {
	color: #2979ff;
}

// 自定义箭头图标
.arrow-icon {
	width: 14rpx;
	height: 14rpx;
	border-right: 2rpx solid #666;
	border-bottom: 2rpx solid #666;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
	margin-top: -6rpx;
}

.arrow-icon.rotate {
	transform: rotate(-135deg);
	margin-top: 6rpx;
	border-color: #2979ff;
}

.dropdown-panel {
	position: absolute;
	width: 96%;
	left: 2%;
	top: 100rpx;
	background-color: #ffffff;
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12);
	border-radius: 12rpx;
	z-index: 999;
	max-height: 480rpx;
	overflow-y: auto;
	transform-origin: top center;
	animation: dropdownOpen 0.2s ease-out forwards;
}

.dropdown-panel::before {
	content: '';
	position: absolute;
	top: -10rpx;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 20rpx;
	height: 20rpx;
	background-color: #ffffff;
	box-shadow: -2rpx -2rpx 5rpx rgba(0,0,0,0.05);
	z-index: -1;
}

.dropdown-item {
	padding: 28rpx 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(0,0,0,0.03);
	transition: all 0.2s;
}

.dropdown-item:last-child {
	border-bottom: none;
}

.dropdown-item:active {
	background-color: rgba(41, 121, 255, 0.05);
}

.dropdown-item text {
	font-size: 28rpx;
	color: #3a4354;
	transition: color 0.2s;
}

.dropdown-item.active {
	background-color: rgba(41, 121, 255, 0.08);
}

.dropdown-item.active text {
	color: #2979ff;
	font-weight: 500;
}

// 自定义对勾图标
.check-icon {
	width: 16rpx;
	height: 10rpx;
	border-left: 2rpx solid #2979ff;
	border-bottom: 2rpx solid #2979ff;
	transform: rotate(-45deg);
}

@keyframes dropdownOpen {
	from {
		opacity: 0;
		transform: translateY(-10rpx) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
</style> 